<template>
  <div style="position: relative;width: 100%;">
    <el-row>
      <el-col :span="10">
       <div>
          <h2>客户项目转化率</h2>
          <h4>本年度各层级客户项目转化率</h4>
        </div>
        <el-form :model="ring" size="mini" @submit.native.prevent >
          <el-form-item label="年份选择" style="display:block;margin-right:20px;">
            <el-select v-model="funnelYear" placeholder="全部" clearable @change="funnelChange"><!--仍为静态-->
              <el-option v-for="i in yOption" :key="i.value" :label="i.label" :value="i.value" >
              </el-option>
            </el-select>
          </el-form-item>
          <div id="funnel" :style="{width: '300px', height: '400px'}"></div>
        </el-form>
      </el-col>
      <el-col :span="14" >
        <div>
        <h2>各单位属性客户占比</h2>
        <h4>各单位属性客户数量及占比</h4>
        </div>
        <el-form :model="pie2" size="mini" @submit.native.prevent >
          <el-form-item label="年份选择" style="display:block;margin-right:20px;">
            <el-select v-model="pieYear" placeholder="全部" clearable @change="pieChange"><!--仍为静态-->
              <el-option v-for="i in yOption" :key="i.value" :label="i.label" :value="i.value" >
              </el-option>
            </el-select>
          </el-form-item>
          <div style="width:85%;">
            <div id="pie" :style="{width: '400px', height: '400px'}"></div>
          </div>
        </el-form>
      </el-col>
      <el-col :span="20">
        <span style="width:100%;display:inline-block;float:left">
        <div style="float:left">
          <h2>客户全国分布</h2>
          <h4>客户全国分布情况</h4>
        </div>
        </span>
        <div id="map" style="width: 800px;height: 400px"></div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import echarts from 'echarts';
import zhongguo from '@/assets/Map.json';
import { InvitationStatisticsTable } from '@/api/bigdata.js';
export default {
  data () {
    return {
      funnelYear: null,
      funnelData: [],
      funnelBottom: 0,
      pieYear: null,
      pieData: [],
      mapData: [],
      yOption: [],
      typeProps: {
        value: 'id',
        label: 'businessName',
        checkStrictly: true /*  multiple: true, */,
        children: 'children'
      }
    };
  },
  mounted () {
    this.loadYearRange();
    this.funnelChange();
    this.pieChange();
    this.getMap();
  },
  methods: {
    // 年份列表数据获取
    loadYearRange () {
      let params = {year: 4};
      return new Promise((resolve, reject) => {
        InvitationStatisticsTable.anaYearRange(this, params).then(res => {
          let thisYear = new Date().getFullYear();
          for (let i = res.data - 2; i <= thisYear; i++) {
            this.yOption.push({value: i, label: i});
          }
        }).catch(e => {
          reject(e)
        })
      })
    },
    initFunnel () {
      let getFunnel = echarts.init(document.getElementById('funnel'));
      var option = {
        tooltip: {
          show: true, formatter: '{b}<br/>{c}%'
        },
        legend: {
          bottom: 12
        },
        grid: {
          left: '2%',
          right: '4%',
          bottom: '5%',
          top: '16%',
          containLabel: true
        },
        series: [{
          type: 'funnel',
          min: this.funnelBottom,
          minSize: this.funnelBottom + '%',
          max: 100,
          // label: {show: false},
          sort: 'descending',
          data: this.funnelData
        }]
      };
      getFunnel.setOption(option)
    },
    funnelChange () {
      let params = {
        year: this.funnelYear ? this.funnelYear : null
      };
      return new Promise((resolve, reject) => {
        InvitationStatisticsTable.customerRate(this, params).then(res => {
          this.funnelData = res.data;
          this.funnelBottom = res.data[0].value;
          this.initFunnel();
        }).catch(e => {
          reject(e);
        })
      })
    },
    initPie () {
      let getPie = echarts.init(document.getElementById('pie'));
      var option = {
        tooltip: {
          trigger: 'item'
        },
        legend: {
          orient: 'vertical',
          left: 'right'
        },
        series: [
          {
            name: '客户数量',
            type: 'pie',
            radius: '50%',
            data: this.pieData,
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      };
      getPie.setOption(option)
    },
    pieChange () {
      let params = {
        year: this.pieYear ? this.pieYear : null
      }
      return new Promise((resolve, reject) => {
        InvitationStatisticsTable.customerClassify(this, params).then(res => {
          this.pieData = res.data;
          this.initPie();
        }).catch(e => {
          reject(e);
        })
      })
    },
    getMap () {
      return new Promise((resolve, reject) => {
        InvitationStatisticsTable.customerArea(this).then(res => {
          this.mapData = res.data;
          this.initMap();
        }).catch(e => {
          reject(e);
        })
      })
    },
    initMap () {
      let chs = echarts.init(document.getElementById('map'));
      const option = {
        // backgroundColor: "#404a59",
        tooltip: {
          show: true,
          trigger: 'item',
          formatter: function (params) {
            return params.data.detail
          },
          alwaysShowContent: false,
          backgroundColor: '#0C121C',
          borderColor: 'rgba(0, 0, 0, 0.16);',
          hideDelay: 100,
          triggerOn: 'mousemove',
          enterable: true,
          testStyle: {
            color: '#DADADA',
            fontSize: '12',
            width: 20,
            height: 30,
            overflow: 'break'
          },
          showDelay: 100
        },
        visualMap: {
          // min: 80,
          // max: 500,
          text: ['High', 'Low'],
          realtime: false,
          calculable: true,
          inRange: {
            color: ['lightskyblue', 'yellow', 'orangered']
          }
        },
        series: [{
          name: '名称',
          type: 'map',
          map: 'china',
          label: {emphasis: {textStyle: {color: '#000'}}},
          itemStyle: {
            normal: {
              borderColor: 'rgba(147, 235, 248, 1)',
              borderWidth: 1,
              areaColor: {
                type: 'radial',
                x: 0.5,
                y: 0.5,
                r: 0.8,
                colorStops: [
                  {
                    offset: 0,
                    color: 'rgba(147, 235, 248, 0)'
                  },
                  {
                    offset: 1,
                    color: 'rgba(147, 235, 248, .2)'
                  }
                ],
                globalCoord: false
              }
            },
            emphasis: {
              areaColor: '#389BB7',
              borderWidth: 0
            }
          },
          data: this.mapData
        }]
      };
      echarts.registerMap('china', zhongguo)
      chs.setOption(option);
    }
  }
};
</script>
